<template>
  <div class="ordermodify-container">
    <breadcrumb style="width: 100%;"></breadcrumb>
    <el-container>
      <el-main>
        <el-card class="box-card" special style="height:360px">
          <div slot="header" class="clearfix">
            <span>换货</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="换货原因：" label-width="130px" style="height:60px">
              <el-input
                v-model="form.postSale.reason"
                type="textarea"
                autosize
                readonly
                style="width: 200px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="换货时间：" label-width="130px">
              <el-input v-model="form.postSale.createTime" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="换货图片：" label-width="130px">
              <img
                style="width: 100px; height: 100px"
                :src="exPicture1"
                @click="dialogVisible1=true"
              />
              <el-dialog :visible.sync="dialogVisible1" width="25%">
                <img width="100%" :src="exPicture1" alt />
              </el-dialog>

              <img
                style="width: 100px; height: 100px"
                :src="exPicture2"
                @click="dialogVisible2=true"
              />
              <el-dialog :visible.sync="dialogVisible2" width="25%">
                <img width="100%" :src="exPicture2" alt />
              </el-dialog>
              <img
                style="width: 100px; height: 100px"
                :src="exPicture3"
                @click="dialogVisible3=true"
              />
              <el-dialog :visible.sync="dialogVisible3" width="25%">
                <img width="100%" :src="exPicture3" alt />
              </el-dialog>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户寄回快递信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="快递公司：" label-width="130px">
              <el-input v-model="form.postSale.exTrackingCompany" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="快递单号：" label-width="130px">
              <el-input v-model="form.postSale.exTrackingNumber" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="寄回时间：" label-width="130px">
              <el-input v-model="form.postSale.orderCourierCode" readonly style="width: 200px;"></el-input>
            </el-form-item>-->
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="用户ID：" label-width="130px">
              <el-input v-model="form.userNo" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称：" label-width="130px">
              <el-input v-model="form.userName" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="收货人：" label-width="130px">
              <el-input v-model="form.userAddressName" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="收货人手机号：" label-width="130px">
              <el-input v-model="form.userAddressPhone" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <!-- Address 需要 userAddressProvince + userAddressRegion +userAddressTown + userAddress-->
            <el-form-item label="收货人地址：" label-width="130px" style="height:60px">
              <el-input
                v-model="form.Address"
                readonly
                style="width: 200px;"
                type="textarea"
                autosize
              ></el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="订单编号：" label-width="130px">
              <el-input v-model="form.orderNo" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="下单时间：" label-width="130px">
              <el-input v-model="form.createtime" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <!-- positionName + teamId -->
            <el-form-item label="订单所属活动：" label-width="130px">
              <el-input v-model="form.position_" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="订单状态：" label-width="130px">
              <el-select v-model="form.status" disabled>
                <el-option
                  v-for="item in options2"
                  :key="item.value2"
                  :label="item.label"
                  :value="item.value2"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item style="height: 60px;">
              <span v-if="this.form.goodsBNumber">商品A：</span>
              <span v-else>商品名称：</span>
              <el-input v-model="form.goodsName" type="textarea" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
              <div v-if="this.form.goodsBNumber">
                <span>商品A购买数量：</span>
                <el-input v-model="goodsANumber" readonly style="width: 200px;"></el-input>
              </div>
              <div v-else>
                <span>购买数量：</span>
                <el-input v-model="form.goodsNumber" readonly style="width: 200px;"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <span v-if="this.form.goodsBNumber">商品A库存数量：</span>
              <span v-else>库存数量：</span>
              <el-input v-model="form.goodsStore" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item
              v-if="this.form.goodsBNumber"
              label="商品B："
              label-width="130px"
              style="height: 60px;"
            >
              <el-input v-model="form.goodsBName" type="textarea" readonly style="width: 200px;"></el-input>
              <span>*{{goodsBNumber}}</span>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>费用信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="商品金额：" label-width="130px">
              <el-input v-model="form.goodsPrice" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="商品运费：" label-width="130px">
              <el-input v-model="form.shipFee" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="应付金额：" label-width="130px">
              <el-input v-model="form.amount" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="使用优惠券：" label-width="130px">
              <el-input v-model="form.couponPay" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="使用红包：" label-width="130px">
              <el-input v-model="form.redpacketPay" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <!--是否使用免邮券 1使用 0不使用  -->
            <el-form-item label="是否使用免邮券：" label-width="130px">
              <el-input v-model="form.freePostage" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="使用购物券：" label-width="130px">
              <el-input v-model="form.favourPay" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="使用钻石：" label-width="130px">
              <el-input v-model="form.balancePay" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="富友支付：" label-width="130px">
              <el-input v-model="form.miniPay" readonly style="width: 200px;"></el-input>
              <span>元</span>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 发货订单必传参数id -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快递信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="快递公司：" label-width="130px">
              <el-input v-model="form.orderCourier" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="快递单号：" label-width="130px">
              <el-input v-model="form.orderLogisticNo" readonly style="width: 200px;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="快递公司编码：" label-width="130px">
              <el-input v-model="form.orderCourierCode" readonly style="width: 200px;"></el-input>
            </el-form-item>-->
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>换货快递信息</span>
          </div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="快递公司：" label-width="130px">
              <el-input v-model="form.postSale.courier"></el-input>
            </el-form-item>
            <el-form-item label="快递单号：" label-width="130px">
              <el-input v-model="form.postSale.logisticNo"></el-input>
            </el-form-item>
            <!-- 时间参数暂时没有 -->
            <!-- <el-form-item label="快递公司编码：" label-width="130px">
              <el-input v-model="form.postSale.courierCode"></el-input>
            </el-form-item>-->
          </el-form>
        </el-card>
        <!-- 退款不需要寄回地址 -->
        <!-- <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>寄回地址</span>
          </div>
          <el-form label-width="100px">
            <el-form-item label="收件人：" label-width="130px">
              <el-input v-model="sendBackReceiver"></el-input>
            </el-form-item>
            <el-form-item label="电话：" label-width="130px">
              <el-input v-model="sendBackPhone"></el-input>
            </el-form-item>
            <el-form-item label="地址：" label-width="130px">
              <el-input v-model="sendBackAddress"></el-input>
            </el-form-item>
          </el-form>
        </el-card>-->
      </el-main>
      <el-footer>
        <el-button type="primary" @click="upadatedOrder" style="width:100px">确定</el-button>

        <el-button @click="$router.go(-1)" style="width:100px">取消</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import breadcrumb from "../../components/breadcrumb";
import logistics from "../../components/logisticsDetail";
import { get_courier_list } from "../../api/getData";
export default {
  components: { breadcrumb, logistics },
  data() {
    return {
      readonly: true,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      id: this.$route.query.id,
      goodsBNumber: "",
      goodsANumber: "",
      postSaleId: this.$route.query.postSaleId,
      form: {
        userId: "", //
        userName: "", //
        userAddressName: "", //
        userAddressPhone: "", //
        Address: "", //
        userAddressProvince: "", //省
        userAddressRegion: "", //市
        userAddressTown: "", //县
        userAddress: "", //详细  这4个拼接起来  合成address
        orderNo: "", //
        createtime: "", //
        position_: "", //
        positionId: "", //
        positionName: "", //
        teamId: "", //拼团id
        promotionId: "", //活动名称
        times: "", //拼团次数times团次数（第几轮拼团）
        goodsId: "",
        goodsName: "",
        goodsNumber: "", //购买数量
        goodsStore: "", //库存
        amount: "", //
        couponPay: "", //
        favourPay: "", //
        miniPay: "", //
        balancePay: "", //钻石支付
        redpacketPay: "", //
        goodsPrice: "", //
        freePostage: "", //
        shipFee: "", //
        postSale: {
          createTime: "",
          exGoodsId: "",
          exPicture1: "",
          exPicture2: "",
          exPicture3: "",
          userMessagePicture1: "",
          userMessagePicture2: "",
          userMessagePicture3: "",
          sendBackAddress: "",
          sendBackPhone: "",
          sendBackReceiver: ""
        } //售后订单
      },
      exPicture1: "",
      exPicture2: "",
      exPicture3: "",
      userMessagePicture1: "",
      userMessagePicture2: "",
      userMessagePicture3: "",
      sendBackAddress: "",
      sendBackPhone: "",
      sendBackReceiver: "",
      options2: [
        { value2: "1", label: "待付款" },
        { value2: "2", label: "未填地址" },
        { value2: "3", label: "待发货" },
        { value2: "4", label: "待收货" },
        { value2: "5", label: "待评价" },
        { value2: "6", label: "已完成" },
        { value2: "7", label: "待分享" },
        { value2: "8", label: "待领取" },
        { value2: "9", label: "售后" },
        { value2: "10", label: "已关闭" }
      ]
    };
  },
  created() {
    this.get_orderList();
  },
  methods: {
    get_orderList() {
      this.$axios.post("/web_order/get/" + this.id).then(res => {
        this.form = res.data.data;
        this.goodsBNumber = this.form.goodsBNumber;
        this.goodsANumber = this.form.goodsNumber - this.form.goodsBNumber;
        this.form.Address =
          this.form.userAddressProvince +
          this.form.userAddressRegion +
          this.form.userAddressTown +
          this.form.userAddress;
        switch (this.form.positionName) {
          case "五折拼团":
            this.form.position_ =
              this.form.positionName +
              "团号" +
              this.form.teamId +
              "第" +
              this.form.times +
              "轮";
            break;
          case "五折拼团":
            this.form.position_ =
              this.form.positionName +
              "团号" +
              this.form.teamId +
              "第" +
              this.form.times +
              "轮";
            break;
          case "五折拼团":
            this.form.position_ =
              this.form.positionName +
              "团号" +
              this.form.teamId +
              "第" +
              this.form.times +
              "轮";
            break;
          case "七折拼团":
            this.form.position_ =
              this.form.positionName +
              "团号" +
              this.form.teamId +
              "第" +
              this.form.times +
              "轮";
            break;
          case "情怀拼团":
            this.form.position_ =
              this.form.positionName + "团号" + this.form.teamId;
            break;
          case "9.9拼团":
            this.form.position_ =
              this.form.positionName + "团号" + this.form.teamId;
            break;
          case "拼团爆单":
            this.form.position_ =
              this.form.positionName + "团号" + this.form.teamId;
            break;
          default:
            this.form.position_ = this.form.positionName;
            break;
        }
        this.exPicture1 = this.form.postSale.exPicture1;
        this.exPicture2 = this.form.postSale.exPicture2;
        this.exPicture3 = this.form.postSale.exPicture3;
        this.userMessagePicture1 = this.form.postSale.userMessagePicture1;
        this.userMessagePicture2 = this.form.postSale.userMessagePicture2;
        this.userMessagePicture3 = this.form.postSale.userMessagePicture3;
        this.form.status = this.options2[this.form.status - 1].label;
      });
    },

    upadatedOrder() {
      if (this.form.postSale.courier == "") {
        return this.$message({
          type: "warning",
          message: "快递公司不能为空"
        });
      }
      if (this.form.postSale.logisticNo == "") {
        return this.$message({
          type: "warning",
          message: "快递单号不能为空"
        });
      }
      // if (this.form.postSale.courierCode == "") {
      //   return this.$message({
      //     type: "warning",
      //     message: "快递公司编码不能为空"
      //   });
      // }
      let data = {
        id: this.postSaleId,
        courier: this.form.postSale.courier,
        logisticNo: this.form.postSale.logisticNo,
        courierCode: this.form.postSale.courierCode
      };
      this.$axios.post("/web_order/postSale_sendBack", data).then(result => {
        if (result.data.status == 0) {
          if (result.data.data == true) {
            this.get_orderList();
            return this.$message({
              type: "success",
              message: "操作成功"
            });
          } else {
            return this.$message({
              type: "warning",
              message: "操作失败"
            });
          }
        }
      });

      history.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.ordermodify-container {
  height: 100%;
  position: relative;
  > img {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    right: 40px;
    z-index: 99;
    cursor: pointer;
  }
  > .el-container {
    padding: 0;
    // > .el-header {
    //   width: 100%;
    //   text-align: center;
    //   line-height: 50px;
    //   color: #5d70e9;
    //   font-weight: 600;
    //   height: 50px !important;
    // }
    > .el-main {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 30px;
      // .special {
      //   .el-card__body {
      //     height: 390px;
      //   }
      // }
      .box-card {
        width: 33.3%;
        border: none;
        float: left;
        .el-form-item {
          height: 20px;
          .img {
            width: 150px;
            height: 150px;
          }
          .el-input {
            width: 200px;
          }
        }
      }
    }
    .el-footer {
      height: 80px !important;
      // display: flex;
      // align-items: center;
      line-height: 80px;
      padding-left: 400px;
      > button {
        height: 30px !important;
        line-height: 30px;
        padding: 0;
        width: 60px;
        margin: 0 20px;
        // box-sizing: content-box;
      }
    }
  }
}
</style>

